<template>
    <div>
    <div class="mainBox" >
        <!-- <div class="tab">
            <div class="item"  v-for="(tab,index) in childTabs" :key="index">{{ tab }}</div>
         
        </div>
         <div class="mainCon">
             <div class="lists"  >
                  <div class="item" v-for="(item,index) in childLists" :key="index">
                     
                          <div class="img">
                              <img :src="item.img" alt=""  >
                          </div>
                    
                      <div class="text"  >
                          <div class="t1">{{ item.t1 }}</div>
                          <div class="t2">{{ item.t2 }}<span>&nbsp;</span>{{ item.t3 }}</div>
                      </div>
                  </div>
         
             </div>
         </div>  -->
         <slot name="mainBoxTabs" :childName="tabs"></slot>
         <slot name="mainBoxLists" :childName="lists"></slot>
        <slot name="mainBoxHouse" :childName="house"></slot>
                <slot name="mainBoxCar" :childName="car"></slot>
         <slot name="mainBoxHouseList" :childName="list"></slot>
            <slot name="mainBoxCarList" :childName="carList"></slot>
    </div>
 </div>
</template>
<script>
export default {
  // props:[ 'childTabs','childLists'],

  data() {
    return {
      tabs: [
        "不限",
        "孩子们的欢乐趴",
        "主题个性创意",
        "现代时尚艺术",
        "户外田园森系",
        "永恒经典浪漫",
        "唯美公主童话"
      ],
      house: ["不限", "五星酒店", "星级酒店", "餐厅特色", "婚礼会所"],
      car: [
        "别克",
        "奥迪",
        "考斯特",
        "金龙",
        "宝马",
        "奔驰",
        "沃尔沃",
        "林肯",
        "大众",
        "路虎",
        "保时捷",
        "雷克萨斯",
        "克莱斯勒",
        "玛莎拉蒂",
        "迈巴赫",
        "法拉利",
        "阿斯顿马丁",
        "兰博基尼"
      ],
      lists: [
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/site/wed1.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          },

          t1: "如歌",
          t2: "如梦繁华",
          t3: "缔造宫廷的华光溢彩"
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/site/wed2.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          },

          t1: "梦的延长线",
          t2: "私藏一份温柔",
          t3: "清澈的爱着你"
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/site/wed3.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          },

          t1: "如歌  (Cantabile)",
          t2: "繁华如歌",
          t3: "缔造华丽的唯美时刻"
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/site/wed4.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          },

          t1: "梦的延长线",
          t2: "私藏一份温柔",
          t3: "清澈的爱着你"
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/site/wed5.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          },

          t1: "梦的延长线",
          t2: "私藏一份温柔",
          t3: "清澈的爱着你"
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/site/wed6.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          },

          t1: "梦的延长线",
          t2: "私藏一份温柔",
          t3: "清澈的爱着你"
        }
      ],
      carList: [
        [
          {
            img: {
              backgroundImage:
                "url(" + require("../assets/images/car/car1.jpg") + ")",
              backgroundSize: "cover",
              backgroundPosition: "center",
              nackgroundRepeat: "no-repeat"
            }
          },
          {
            img: {
              backgroundImage:
                "url(" + require("../assets/images/car/car2.jpg") + ")",
              backgroundSize: "cover",
              backgroundPosition: "center",
              nackgroundRepeat: "no-repeat"
            }
          }
        ],
        [
          {
            img: {
              backgroundImage:
                "url(" + require("../assets/images/car/car3.jpg") + ")",
              backgroundSize: "cover",
              backgroundPosition: "center",
              nackgroundRepeat: "no-repeat"
            }
          },
          {
            img: {
              backgroundImage:
                "url(" + require("../assets/images/car/car4.jpg") + ")",
              backgroundSize: "cover",
              backgroundPosition: "center",
              nackgroundRepeat: "no-repeat"
            }
          }
        ]
      ],
      list: [
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/house/house1.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          },

          t1: "如歌",
          t2: "如梦繁华",
          t3: "缔造宫廷的华光溢彩"
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/house/house2.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          },

          t1: "梦的延长线",
          t2: "私藏一份温柔",
          t3: "清澈的爱着你"
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/house/house3.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          },

          t1: "如歌  (Cantabile)",
          t2: "繁华如歌",
          t3: "缔造华丽的唯美时刻"
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/house/house1.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          },

          t1: "梦的延长线",
          t2: "私藏一份温柔",
          t3: "清澈的爱着你"
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/house/house2.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          },

          t1: "梦的延长线",
          t2: "私藏一份温柔",
          t3: "清澈的爱着你"
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/house/house3.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          },

          t1: "梦的延长线",
          t2: "私藏一份温柔",
          t3: "清澈的爱着你"
        }
      ]
    };
  }
};
</script>
<style >
.mainBox {
  width: 100%;
  height: 900px;
  background-color: #0c0c0c;
  padding-top: 90px;
}
.mainBox .tab {
  margin-left: 20%;
  display: flex;
}
.mainBox .tab .item {
  margin-right: 60px;
  font-size: 16px;
  margin-top: -80px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mainCon {
  height: 100%;
  margin: 0 60px;
  /* background-color: #fff; */
}
.mainCon .lists {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}
.mainCon .item {
  height: 365px;
  /* background-color: #121212; */
  margin-bottom: 35px;
  position: relative;
}
/* .mainCon .item .img::after{
  position: absolute;
  right: 10px;
  top: 5px;
  content:"\e772";
  font-family: "iconfont";
  color: #fff;
  font-size: 25px;
} */

.mainCon .item .backImage {
  width: 100%;
  height: 290px;
  opacity: 0.7;
  border-radius: 15px;
}

.mainCon .item .img {
  transition: all 0.6s ease;
}
.mainCon .item:hover .backImage {
  transform: scale(0.99);
  transition: all 0.6s ease;
  opacity: 1;
}
.mainCon .item .img .mark img {
  z-index: 5;
  width: 40px;
  height: 40px;
  position: absolute;
  right: 10px;
  top: 5px;
}
.mainCon .item .text {
  margin-top: 20px;
  text-align: center;
}
.mainCon .item .text .t1 {
  font-size: 20px;
  color: #fff;
  flex-wrap: 600;
}
.mainCon .item .text .t2 {
  color: #606060;
}

.mainCon .item .house_text {
  margin-top: 10px;
}
.mainCon .item .house_text .h1 {
  display: flex;
  justify-content: space-between;
}
.mainCon .item .house_text .h1 .h1_1 {
  font-size: 20px;
  color: #fff;
}
.mainCon .item .house_text .h1 .h1_2 {
  font-size: 12px;
  color: #a3a3a3;
}
.mainCon .item .house_text .h2 {
  display: flex;
  justify-content: flex-start;
}
.mainCon .item .house_text .h2 .h2_0 {
  color: #fff;
  margin-right: 10px;
  text-align: center;
  background-color: #2e2e2e;
  padding: 2px;
}
</style>

